<template>
    <div>
       <full-calendar  :events="monthData" class="test-fc"
                         first-day='1' locale="zh-cn"
                         @changeMonth="changeMonth"
                         @eventClick="eventClick"
                         @dayClick="dayClick"
                         @moreClick="moreClick"></full-calendar>


                         <!-- 修改弹框 -->
         <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
          <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
          <el-form ref="form" >

            <el-form-item label="预约日期"  :label-width="formLabelWidth">
              <el-input  auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="可预约人数" :label-width="formLabelWidth">
              <el-input  auto-complete="off"></el-input>
            </el-form-item>

          </el-form>
          <div slot="footer"  class="dialog-footer">
            <el-button @click="cancel" >取 消</el-button>
            <!-- 设置触发更新的方法 -->
            <el-button type="submit" @click="tjiao">确定</el-button>
          </div>
        </el-dialog>

    </div>


    </template>
 <!--     切换月时的事件，可自己定义事件
       // 点击当天的事件，可自己定义事件
       // 点击当月的事件，可自己定义事件
        // 点击 more, 展示当天所有事件，可自己定义事件 -->
    <script>

    import FullCalendar from 'vue-fullcalendar'

    export default {
      data() {
          return {
            dialogFormVisible: false,
                formLabelWidth: "80px",
           monthData: [
    {
      title : 'eeeeeeeee',  // 事件内容
      start : '2018-12-11', // 事件开始时间
      end : '2018-12-30',   // 事件结束时间
      cssClass: 'red'       // 事件的样式   class名（由后台返回数据）  red为自己定义的class名
    },]
          }
      },
      methods: {
         // 选择月份
          changeMonth (start, end, current) {

          },
          // 点击事件
          eventClick (event, jsEvent, pos) {
              console.log(event)
          },
          // 点击当天
          dayClick (day, jsEvent) {
              
             this.dialogFormVisible=true
          },
          // 查看更多
          moreClick (day, events, jsEvent) {

          },

       tjiao() {

            this.dialogFormVisible = false;
     },
     cancel() {
      // 取消的时候直接设置对话框不可见即可
      this.dialogFormVisible = false;
    }
      },
      components: {
          'full-calendar': require('vue-fullcalendar')
      },
    }
    </script>

    <style>
.red {
  background: red;
}
.blue {
  background: blue;
}
</style>
